<template>
    <div class="template">
        <div class="nav" style="background-color: #292C31;">
            <img :src="black" style="width: 51px;" @click="router.back()"/>
            History
            <div style="width: 51px;"></div>
        </div>
        <div v-if="historyList.length <= 0" style="margin-top: 3vh;display: flex;flex-direction: column;align-items: center;">
            <img :src="nodata" style="height: 28vh;"/>
            <div class="nodataTip">Nothing here</div>
        </div>
        <div v-else class="lookList">
            <div v-for="(item, index) in historyList" :key="index">
                <div v-for="(item2, index2) in item.QR" :key="index2" class="historyItem">
                    <img :src="historybg" style="width: 100%;" />
                    <img :src="close" style="width: 20px;position: absolute;top: 20px;right: 20px;z-index:999;" @click="deleteQR(index, index2)"/>
                    <div class="info">
                        <img :src="item2" style="height: 100%;border-radius: 16px;" />
                        <div class="infoData">
                            <div>{{ item.time }}</div>
                            <div>NO.{{ item.QR.length - index2 }}</div>
                            <div class="save" @click="savePic(item2)">save</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { showConfirmDialog } from "vant";
import close from '../assets/close.png'
import nodata from '../assets/nodata@2x.png'
import black from '../assets/black.png'
import historybg from '../assets/historybg@2x.png'
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue'
const router = useRouter()
let historyList = ref([])
onMounted(() => {
    historyList.value = localStorage.getItem('QRhistory') ? JSON.parse(localStorage.getItem('QRhistory')) : []
})
const deleteQR = (index1, index2) => {
    showConfirmDialog({
      message: 'Are you sure you want to delete this QR code?',
      confirmButtonText: 'Confirm',
      cancelButtonText: 'Cancel'
    }).then(() => {
        historyList.value[index1].QR.splice(index2, 1)
        let data = historyList.value.filter(res => res.QR.length > 0)
        historyList.value = data
        localStorage.setItem('QRhistory', JSON.stringify(data))
    })
}
const savePic = (imgData) => {
    window['reducedCoins'] = (data) => {
	    if (data === "1") {
	    } else {
	    }
	}
	window['album'](0, imgData);
}
</script>
<style scoped>
.nodataTip {
    font-weight: bold;
    font-size: 36px;
    color: #000000;
    margin: 30px auto;
    text-align: center;
}
.lookList {
    width: 100vw;
    height: 80vh;
    overflow: auto;
    margin-top: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}
.historyItem {
    margin-bottom: 20px;
    position: relative;
    font-weight: bold;
    font-size: 18px;
    color: #FFFFFF;

}
.info {
    width: 100%;
    height: 100%;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}
.save {
    width: 124px;
    height: 31px;
    background: #80C978;
    border-radius: 33px 33px 33px 33px;
    font-weight: bold;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height: 31px;
}
.infoData {
    margin-left: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
</style>